import React from "react";
import { menuRoutes } from "@/router/menu-routes";
import { Menu, MenuProps } from "antd";
// 导入 useNavigate 钩子
import { useNavigate } from "react-router-dom";
import "./index.scss";
type MenuItem = Required<MenuProps>["items"][number];

const menuItems: MenuItem[] = menuRoutes.map((item) => ({
  label: item.meta?.label || item.path!,
  key: item.path!,
}));

// 在组件中使用 useNavigate 和添加点击事件处理
export default function Sidebar() {
  // 使用useNavigate钩子实现路由跳转
  const navigate = useNavigate();

  // 菜单点击事件处理函数
  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
    // 跳转到对应路由路径
    navigate(`/${key}`);
  };
  return (
    <div className="h-full bg-white w-[200px] flex flex-col sidebar">
      <div className="bg-[#f5f5f5] flex items-center justify-center title">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-[60px] w-[170px]"
          viewBox="0 0 200 60"
          fill="none"
        >
          {/* 背景装饰 */}
          <path
            d="M0 30C30 15 70 45 100 30C130 15 170 45 200 30"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            opacity="0.3"
          />

          {/* 主图形 */}
          <rect
            x="10"
            y="15"
            width="20"
            height="30"
            rx="2"
            fill="currentColor"
            opacity="0.8"
          />
          <rect
            x="40"
            y="15"
            width="20"
            height="30"
            rx="2"
            fill="currentColor"
            opacity="0.8"
          />
          <rect
            x="70"
            y="15"
            width="20"
            height="30"
            rx="2"
            fill="currentColor"
            opacity="0.8"
          />

          {/* 连接线 */}
          <path
            d="M30 30L40 30"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
          />
          <path
            d="M60 30L70 30"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
          />

          {/* 右侧装饰元素 */}
          <circle cx="140" cy="30" r="10" fill="currentColor" opacity="0.8" />
          <circle cx="170" cy="30" r="10" fill="currentColor" opacity="0.8" />
          <path
            d="M150 30L160 30"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
          />
        </svg>
      </div>

      <Menu
        className="flex-1"
        theme="light"
        mode="inline"
        defaultSelectedKeys={[menuRoutes[0]?.path || ""]}
        items={menuItems}
        onClick={handleMenuClick}
      />
    </div>
  );
}
